<template>
  <div>
    <!--左边部分-->
    <div class="col-1">
      <!--顶部-->
      <div class="section i-pin-v">
        <div class="be-tab">
          <ul class="be-tab-inner clearfix">
            <li :class="['be-tab-item',{isActive:isActive===1}]">
              <span @click="barWidth=85;barOffset=0;isActive=1;changeBg(1)">我的粉丝会看到</span>
            </li>
            <li :class="['be-tab-item',{isActive:isActive===2}]">
              <span @click="barWidth=75;barOffset=113;isActive=2;changeBg(2)">新访客会看到</span>
            </li>
          </ul>
          <div class="be-tab-cursor" :style="barStyle"></div>
        </div>
        <div class="i-pin-empty" ref="emptybg">
          <div class="i-pin-empty-set list-create">
            <div class="create-covers-meta">
              <span class="iconfont icon-plus-full create-covers-meta-span"></span>
              <span class="text" v-if="isActive===1">设置置顶视频</span>
              <span class="text" v-else>设置代表作</span>
            </div>
          </div>
        </div>
      </div>
      <!--我的视频-->
      <div class="section">
        <div class="my-title-empty">
          <span class="common-cursor common-hover">我的视频</span>
          <span class="count">100</span>
          <span class="upload-empty">还没上传过视频哦~ </span>
          <span class="upload-empty-soon"> 立即上传</span>
          <div class="section-right-options">
            <div class="more-operation common-cursor common-hover-border">
              <span class="iconfont icon-bofang1 more-span-color"></span>
              全部播放
            </div>
            <div class="more-operation more-operation-margin common-cursor common-hover-border">
              更多<span class="iconfont icon-icon-xiangyou more-span-color"></span>
            </div>
          </div>
        </div>
      </div>
      <!--我的收藏夹-->
      <div class="section">
        <div class="my-title-empty">
          <span class="common-cursor common-hover">我的收藏夹</span>
          <span class="count">10</span>
          <span class="iconfont icon-Icon_huabanfuben common-span-margin"></span>
          <span class="span-only-self">仅自己可见</span>
          <div class="section-right-options">
            <div class="more-operation more-operation-margin common-cursor common-hover-border">
              更多<span class="iconfont icon-icon-xiangyou more-span-color"></span>
            </div>
          </div>
        </div>
        <div class="fav-item" v-for="item in myFavoritesList" :key="item">
          <a class="fav-covers" href="#">
            <div class="b-img common-cursor coverEmpty">
              <img :src="require('/src/assets/img/picture.png')" alt="">
            </div>
          </a>
          <span class="fav-count">156</span>
          <div class="m">
            <span class="state">公开</span>
            <a href="" class="name" title="默认收藏夹">
              默认收藏夹
            </a>
          </div>
        </div>
      </div>
      <!--订阅番剧-->
      <div class="section">
        <div class="my-title-empty">
          <span class="common-cursor common-hover">订阅番剧</span>
          <span class="iconfont icon-Icon_huabanfuben common-span-margin"></span>
          <span class="span-only-self">仅自己可见</span>
          <div class="section-right-options">
            <div class="more-operation common-cursor common-hover-border">
             <span class="iconfont icon-bofang1 more-span-color"></span> 全部播放
            </div>
            <div class="more-operation more-operation-margin common-cursor common-hover-border">
              更多<span class="iconfont icon-icon-xiangyou more-span-color"></span>
            </div>
          </div>
        </div>
        <!--番剧组件-->
        <pgc-follow :fanList="fanList"></pgc-follow>
      </div>
      <!--最近投币的视频-->
      <div class="section">
        <div class="my-title-empty">
          <span class="common-cursor common-hover">最近投币的视频</span>
          <span class="iconfont icon-Icon_huabanfuben common-span-margin"></span>
          <span class="span-only-self">仅自己可见</span>
          <span style="margin-left: 200px;color: #9499a0;font-size: 12px">空间主人最近一个月没有投过硬币~~</span>
          <div class="section-right-options">
            <div class="more-operation common-cursor common-hover-border">
              <span class="iconfont icon-bofang1 more-span-color"></span>全部播放
            </div>
            <div class="more-operation more-operation-margin common-cursor common-hover-border">
              更多<span class="iconfont icon-icon-xiangyou more-span-color"></span>
            </div>
          </div>
        </div>
        <initial-video-item></initial-video-item>
      </div>
      <!--我的合集和视频列表-->
      <div :class="[collectionList.length>=1?'sectionCollection':'section']">
        <div class="my-title-empty">
          <span class="common-cursor common-hover">我的合集和视频列表</span>
          <div class="more-operation more-operation-margin common-cursor common-hover-border">
            <span class="iconfont icon-jiahao more-span-color"></span> 新建
          </div>
        </div>
        <div class="empty-state" v-if="collectionList.length<=0">
          <div style="margin: auto">
            <p style="color: #6d757a;font-size: 12px">投稿视频可以分类展示了</p>
            <div class="btn-container">
              <span class="btn-content">创建视频列表</span>
            </div>
          </div>
        </div>
        <div style="border-bottom: 1px solid #eee;margin-bottom: 10px" v-for="obj in collectionList" :key="obj">
          <span class="collect-color common-cursor common-hover">我是标题{{obj}}</span>
          <span class="count">10</span>
          <span style="margin-left: 200px;color: #9499a0">此视频列表中还没有视频哦~</span>
          <div class="right-pri" v-if="collectionList.length<=0">
            <div class="more-operation common-cursor common-hover-border">
              <span class="iconfont icon-bofang1 more-span-color"></span>
              全部播放
            </div>
            <div class="more-operation more-operation-margin common-cursor common-hover-border">
              更多<span class="iconfont icon-icon-xiangyou more-span-color"></span>
            </div>
          </div>
          <initial-video-item></initial-video-item>
        </div>
      </div>
      <!--我的专栏-->
      <div class="section">
        <div class="my-title-empty">
          <span class="common-cursor common-hover">我的专栏</span>
        </div>
      </div>
      <!--最近点赞的视频-->
      <div class="section">
        <div class="my-title-empty">
          <span class="common-cursor common-hover">最近点赞的视频</span>
          <span class="iconfont icon-Icon_huabanfuben common-span-margin"></span>
          <span class="span-only-self">仅自己可见</span>
          <span style="margin-left: 200px;color: #9499a0;font-size: 12px">空间主人最近一个月没有投过硬币~~</span>
        </div>
        <initial-video-item :list="initialVideoList"></initial-video-item>
      </div>
    </div>
    <!--右边部分-->
    <div class="col-2">
      <div class="section pos-style">
        <div class="no-auth">
          <img src="https://images.weserv.nl/?url=//i0.hdslb.com/bfs/static/jinkela/space/asserts/icon-auth.png"
               alt="获得 bilibili 认证，享受多重认证福利！" class="icon-auth">
          <div class="no-auth-title">
            <a href="" title="点此申请 bilibili 认证" target="_blank" class="goto-auth">
              点此申请 bilibili 认证
            </a>
            <span>获得 bilibili 认证，享受多重认证福利！</span>
          </div>
        </div>
      </div>
      <div class="section">
        <div style="display: flex;margin-bottom: 15px">
          <a style="text-decoration: none;margin: auto;cursor: pointer">
            <span style="font-size: 22px;color: #00a1d6" class="iconfont icon-dengpao"></span>
            <span style="font-size: 20px;font-weight: bold;color: #00a1d6;margin: 0 10px">创作中心</span>
            <span style="color: #e5e9ef" class="iconfont icon-icon-xiangyou1"></span>
          </a>
        </div>
        <div style="border-radius: 4px;border: 1px solid #e5e9ef;padding: 7px 0;display: flex;font-size: 12px;color: #9499a0">
          <a style="text-decoration: none;margin: auto;cursor: pointer" class="common-hover">
            <span style="margin-right: 5px" class="iconfont icon-icon_update"></span>
            <span>视频投稿</span>
          </a>
          <div style="border-right: 1px solid #e5e9ef;"></div>
          <a style="text-decoration: none;margin: auto;cursor: pointer" class="common-hover">
            <span style="margin-right: 5px" class="iconfont icon-neirongguanli1"></span>
            <span>内容管理</span>
          </a>
        </div>
      </div>
      <div class="section">
        <h3 class="public-title">公告</h3>
        <div>
          <el-input
              v-model="pubtextarea"
              :rows="8"
              type="textarea"
              maxlength="150"
              show-word-limit
              placeholder="编辑我的空间公告"
          />
        </div>
      </div>
      <!--个人资料组件-->
      <profile></profile>
    </div>
  </div>
</template>

<script>
import InitialVideoItem from "@/components/personalHomepageComponent/tabs/initialVideoItem";
import Profile from "@/components/personalHomepageComponent/tabs/profile";
import PgcFollow from "@/components/personalHomepageComponent/tabs/pgcFollow";
export default {
  /**首页组件*/
  name: "initialPage",
  components: {PgcFollow, Profile, InitialVideoItem},
  data() {
    return {
      // 标签默认宽度
      barWidth: 87,
      // 标签偏移量
      barOffset: 0,
      isActive: 1,
      pubtextarea:'',
      collectionList:[],
      myFavoritesList:[1,2,3,4],
      animeList:[],
      mycoinsList:[],
      mydianzanList:[],
      fanList:[
        {badgeBg:'',badgeText:'',area:'',rate:'',episodes:''},
        {badgeBg:'',badgeText:'',area:'',rate:'',episodes:''},
        {badgeBg:'',badgeText:'',area:'',rate:'',episodes:''},
        {badgeBg:'',badgeText:'',area:'',rate:'',episodes:''},
      ],
      initialVideoList:[
        {title:'西西酱',views:141,date:522},
        {title:'东东酱',views:5121,date:'2.3万'},
        {title:'阿里酱',views:341,date:22},
        {title:'康纳酱',views:341,date:1},
      ]
    }
  },

  created() {
    this.addDefaultFavorites()
  },
  mounted() {
    this.changeBg(1)
  },
  computed: {
    // 动态计算标签默认宽度和偏移量
    barStyle() {
      return {
        width: `${this.barWidth}px`,
        transform: `translate3d(${this.barOffset}px,0px,0px)`
      }
    },
  },
  methods: {
    changeBg(index){
      if (index==1){
        this.$nextTick(()=>{
          if (this.$refs.emptybg === undefined) return
          this.$refs.emptybg.style = 'background: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/dbz-hint-33.png) 250px bottom no-repeat'
        })
      }else {
        this.$nextTick(()=>{
          if (this.$refs.emptybg === undefined) return
          this.$refs.emptybg.style = 'background: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/dbz-hint-22.png) 250px bottom no-repeat'
        })
      }
    },
    // 创建默认收藏夹
    async addDefaultFavorites() {
      let res = await this.$util.get('hilihili/favorites/addDefaultFavorites/' + this.$route.params.id, {})
      // console.log('新增、修改收藏夹', res, this.formLabelAlign)
      if (res.code != 200) {
        console.log('为用户创建默认收藏夹失败，msg：', res.msg)
        return false
      }
      return true
    },
  }

}
</script>
<style>

</style>
<style scoped>
.col-1 {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  float: left;
  padding: 15px 20px;
  width: 922px;
}

.col-2 {
  float: right;
  width: 350px;
}
.col-2 .pos-style{
  position: relative;overflow: hidden;
}
.i-pin-v {
  padding-bottom: 20px;
}

.section {
  border-bottom: 1px solid #eee;
  /*margin-bottom: 17px;*/
  position: relative;
}
.sectionCollection{
  position: relative;
}
.be-tab {
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  height: 25px;
}

.be-tab, .be-tab-item {
  position: relative;
}

.be-tab-inner {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

.clearfix {
  display: block;
  zoom: 1;
}

.i-pin-v .be-tab-item {
  padding-bottom: 5px;
  margin-right: 30px;
  font-size: 12px;
}

.be-tab-item {
  float: left;
  line-height: 28px;
  vertical-align: top;
  cursor: pointer;
}
.isActive {
  color: #00a1d6;
}
.be-tab-cursor {
  border-bottom: 1px solid #00a1d6;
  height: 0;
  transition: all .2s ease;
  position: absolute;
  bottom: 0;
}
.be-tab-cursor:after {
  content: "";
  left: 50%;
  transform: translateX(-50%);
  margin-left: -3px;
  border-bottom: 3px solid #00a1d6;
  border-top: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.be-tab-cursor, .be-tab-cursor:after {
  position: absolute;
  bottom: 0;
  height: 0;
  width: 0;
}
.i-pin-empty-set {
  text-align: center;
  width: 215px;
  height: 138px;
}
.list-create {
  cursor: pointer;
  position: relative;
  background: #fff;
  border: 2px dashed #b8c0cc;
  border-radius: 4px;
  transition: border .2s ease;
  box-sizing: border-box;
}
.create-covers-meta {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.create-covers-meta-span {
  display: block;
  color: #999999;
  font-size: 16px;
}

.text {
  display: block;
  line-height: 25px;
  text-align: center;
  color: #999999;
}

.list-create:hover {
  border-color: #00a1d6;
}

.list-create:hover span {
  color: #00a1d6;
}

.count {
  position: relative;
  background: #f6fafb;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #777;
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  margin-left: 11px;
  padding: 0 5px;
  vertical-align: middle;
}
.section .count:before{
  background-image: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/icons.png);
  position: absolute;
}
.section .count:before {
  background-position: -215px -340px;
  content: "";
  display: block;
  left: -6px;
  top: -4px;
  height: 20px;
  width: 7px;
}
.fav-item {
  position: relative;
  display: inline-block;
  margin: 0 20px 28px 0;
}

.fav-covers {
  text-decoration: none;
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  display: block;
  width: 152px;
  height: 152px;
  margin-bottom: 11px;
  overflow: hidden;
  position: relative;
}

.fav-covers .b-img {
  object-fit: cover;
  width: 152px;
  height: 152px;
  overflow: hidden;
}

.fav-covers .b-img img {
  width: 100%;
  height: 100%;
}

.fav-count {
  position: absolute;
  font-size: 12px;
  top: 10px;
  right: 10px;
  min-width: 12px;
  padding: 0 9px;
  line-height: 18px;
  text-align: center;
  font-family: Arial;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(0, 0, 0, .5);
  border-radius: 9px;
}

.state {
  font-size: 12px;
  color: #99a2aa;
  float: right;
  line-height: 24px;
}

.name {
  display: block;
  font-size: 18px;
  font-family: Microsoft Yahei UI Light, Microsoft Yahei Light;
  line-height: 24px;
  width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.name:hover {
  color: #00a1d6;
}
.empty-state{
  display: flex;
}
.col-2 .section {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px 20px 18px;
  margin-bottom: 10px;
}
.no-auth {
  margin: -15px -20px -18px;
}
.icon-auth {
  width: 99px;
  height: 70px;
}
.no-auth-title {
  float: right;
  position: relative;
  top: 9px;
  right: 15px;
}
.goto-auth {
  display: block;
  text-decoration: none;
  cursor: pointer;
  font-size: 18px;
  color: #222;
  margin-bottom: 4px;
}
.no-auth-title span {
  font-size: 12px;
  color: #99a2aa;
}
.public-title{
  border-bottom: 1px solid #e5e9ef;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  margin: -15px 0 10px;
  height: 45px;
  line-height: 45px;
}
.my-title-empty{
  font-weight: 400;font-size:20px;padding-bottom: 15px;height: 66px;line-height: 66px
}

.upload-empty{
  color: #999999;font-size: 12px;margin-left: 270px
}
.upload-empty-soon{
  color: #00a1d6;cursor: pointer;font-size: 12px
}

.span-only-self{
  color: #6d757a;font-size: 12px;margin-left: 5px
}
.common-span-margin{
  margin-left: 15px;color: #999999;
}
.btn-container{
  margin:7px 0 30px 0;text-align: center;font-size: 14px;color: #fff;background-color: #00a1d6;
  border-radius: 4px;width: 140px;height: 40px;line-height: 40px;cursor: pointer
}
.section-right-options{
  position: absolute;
  top: -2px;
  right: 0;
  float: right;
}
.more-operation{
  border: 1px solid #b8c0cc;border-radius: 4px;color: #6d757a;font-size: 12px;padding: 3px 10px;display: inline;
}
.more-operation-margin{
  margin-left: 10px;
}
.more-span-color{
  color: #9499a0;font-size: 12px
}
.common-cursor{
  cursor: pointer;
}
.common-hover:hover {
  color: #00a1d6;
}
.common-hover-border:hover {
  color: #00a1d6;
  border: 1px solid #00a1d6;
}
.common-hover-border:hover span {
  color: #00a1d6;
}
.collect-color{
  color: #6d757a;
}
.right-pri{
  display: inline;float: right
}
.coverEmpty{
  background: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/playlistbg.png) no-repeat;
  background-size: cover;
  background-position: 50%;
}
</style>
